<template>
<table
    class="water-cp-container my-table"
    cellpadding="0" cellspacing="0"
    border="1">
    <tr class="top-container">
        <td class="left">
            矿化度判识 基础数据
        </td>
        <td class="right">
            当前报告
        </td>
    </tr>
    <tr class="content-container">
        <td class="left">
            <div class="container">
                <div class="chart">
                    <MyChart
                        ref="MyChart">
                    </MyChart>
                </div>
                <div class="base-data">
                    <table border="1" class="my-table">
                        <tr>
                            <th>矿化度</th>
                            <th>天然水类型</th>
                            <th>类型列表</th>
                        </tr>
                        <tr>
                            <td class="cols1">大于50g/L</td>
                            <td class="cols2">卤水</td>
                            <td class="data">
                                {{baseFilter['卤水'] && baseFilter['卤水'].map(item=>{
                                    return item.horizon;
                                }).join(',')}}
                            </td>
                        </tr>
                        <tr>
                            <td class="cols1">介于10~50g/L</td>
                            <td class="cols2">盐水</td>
                            <td class="data">
                                {{baseFilter['盐水'] && baseFilter['盐水'].map(item=>{
                                    return item.horizon;
                                }).join(',')}}
                            </td>
                        </tr>
                        <tr>
                            <td class="cols1">介于3~10g/L</td>
                            <td class="cols2">咸水</td>
                            <td class="data">
                                {{baseFilter['咸水'] && baseFilter['咸水'].map(item=>{
                                    return item.horizon;
                                }).join(',')}}
                            </td>
                        </tr>
                        <tr>
                            <td class="cols1">介于1~3g/L</td>
                            <td class="cols2">微咸水</td>
                            <td class="data">
                                {{baseFilter['微咸水'] && baseFilter['微咸水'].map(item=>{
                                    return item.horizon;
                                }).join(',')}}
                            </td>
                        </tr>
                        <tr>
                            <td class="cols1">小于1g/L</td>
                            <td class="cols2">淡水</td>
                            <td class="data">
                                {{baseFilter['淡水'] && baseFilter['淡水'].map(item=>{
                                    return item.horizon;
                                }).join(',')}}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
        <td class="right">
            <div class="chart">
                <MyChart
                    ref="MyChart1">
                </MyChart>
            </div>
            <div class="base-data">
                <table border="1" class="my-table">
                    <tr>
                        <th>矿化度</th>
                        <th>天然水类型</th>
                        <th>类型列表</th>
                    </tr>
                    <tr>
                        <td class="cols1">大于50g/L</td>
                        <td class="cols2">卤水</td>
                        <td class="data">
                            {{currentFilter['卤水'] && currentFilter['卤水'].map(item=>{
                                return item.horizon;
                            }).join(',')}}
                        </td>
                    </tr>
                    <tr>
                        <td class="cols1">介于10~50g/L</td>
                        <td class="cols2">盐水</td>
                        <td class="data">
                            {{currentFilter['盐水'] && currentFilter['盐水'].map(item=>{
                                return item.horizon;
                            }).join(',')}}
                        </td>
                    </tr>
                    <tr>
                        <td class="cols1">介于3~10g/L</td>
                        <td class="cols2">咸水</td>
                        <td class="data">
                            {{currentFilter['咸水'] && currentFilter['咸水'].map(item=>{
                                return item.horizon;
                            }).join(',')}}
                        </td>
                    </tr>
                    <tr>
                        <td class="cols1">介于1~3g/L</td>
                        <td class="cols2">微咸水</td>
                        <td class="data">
                            {{currentFilter['微咸水'] && currentFilter['微咸水'].map(item=>{
                                return item.horizon;
                            }).join(',')}}
                        </td>
                    </tr>
                    <tr>
                        <td class="cols1">小于1g/L</td>
                        <td class="cols2">淡水</td>
                        <td class="data">
                            {{currentFilter['淡水'] && currentFilter['淡水'].map(item=>{
                                return item.horizon;
                            }).join(',')}}
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>
</template>
<script>
/*
 矿化度判识展示页面
 */
import {randomColor} from "@/common/ColorTools";
import {computedRem} from "@/common/OtherTools";
import MyChart from '@/components/MyChart';
export default {
    components:{MyChart},
    props:{
        reports:{  //当前选择的报告列表
            type:Array,
            default:()=>[],
        },
        areas:{  //当前选择的井号
            type:Array,
            default:()=>[],
        },
        horizons:{  //当前选择的层位
            type:Array,
            default:()=>[],
        },
        fontColor:{
            type:String,
            default:'',
        },
        borderColor:{
            type:String,
            default:'',
        },
        chartBorderColor:{
            type:String,
            default:'',
        },
    },
    data() {
        this.nameConfigMap = {};  //颜色列表(保持颜色一致)
        return {
            baseFilter:{},  //基础数据比对结果
            currentFilter:{},  //当前报告比对结果
        };
    },
    watch:{
        reports:{
            handler(){
                this.$nextTick(()=>{
                    this.getReportData();
                    this.getBaseData();
                });
            },
            immediate:true,
        },
    },
    mounted(){
        // this.getBaseData();
    },
    methods:{
        computConfig(data = []){  //计算配置
            data = data || [];
            data.forEach(item=>{
                this.nameConfigMap[item.horizon] = this.nameConfigMap[item.horizon] || {
                    color:randomColor(),
                };
            });
        },
        getBaseData(){  //获取基础数据
            let target = this.$refs.MyChart;
            if(this.reports.length == 0){
                this.drawChart({target,data:[]});
                return;
            }
            this.$Service.post(
                this.$Api.judgment,
                {
                    "isbasic":1,
                    "type":1,
                    'area':this.areas.join(','),
                    'horizon':this.horizons.join(','),
                },
            ).then(data => {
                let target = this.$refs.MyChart;
                this.computConfig(data.data);
                this.dataFilter(this.baseFilter,data.data);
                this.drawChart({target,data:data.data});
            }).catch(() => {
                return;
            });
        },
        getReportData(){  //获取报告数据
            this.currentFilter = {};
            let target = this.$refs.MyChart1;
            if(this.reports.length == 0){
                this.drawChart({target,data:[]});
                return;
            }
            this.$Service.post(
                this.$Api.judgment,
                {
                    "reportType":1,
                    "contenid":this.reports.map(item=>item.contenid).join(","),
                    "reportNo":this.reports.map(item=>item.reportNo).join(","),
                    'area':this.areas.join(','),
                    'horizon':this.horizons.join(','),
                    "type":1,
                },
            ).then(data => {
                this.computConfig(data.data);
                this.dataFilter(this.currentFilter,data.data);
                this.drawChart({target,data:data.data});
            }).catch(() => {
                this.drawChart({target,data:[]});
                return;
            });
        },
        dataFilter(target,dataList){
            dataList.forEach(item=>{
                let type = this.onContrast(item.num);
                target[type] = target[type] || [];
                target[type].push(item);
            });
            this.$forceUpdate();
        },
        onContrast(data){  //比对
            switch(true){
                case data > 50:
                    return '卤水';
                case data > 10 && data<=50:
                    return '盐水';
                case data > 3 && data<=10:
                    return '咸水';
                case data >= 1 && data<=3:
                    return '微咸水';
                case data < 50:
                    return '淡水';
            }
        },
        drawChart({target,data={}}){  //绘制表格
            let rem = computedRem();
            target.setOption({
                dataZoom: [
                    {
                        type: 'slider', //表示以滚动条的形式出现
                        show: true, //显示滚动条
                        start: 0, 
                        end: 40 //表示x轴的数据最多显示50%
                    },
                ],
                grid: {
                    left: '15%',
                    right: '5%',
                    top: '10%',
                    bottom: '20%',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: params=>{
                        return `${params.name}:${params.value}<br>
                        判识为: ${this.onContrast(params.value)}`;
                    },
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item=>{
                        return item.horizon;
                    }),
                    nameTextStyle:{
                        fontWeight:'bold',
                        fontSize:1*rem,
                    },
                    splitArea: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color:this.fontColor,
                        },
                        onZero:false,
                    },
                    axisLabel:{  //x轴的标签设置
                        show:true,
                        lineStyle: {
                            color:this.fontColor,
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    min:0,
                    max:350,
                    name: '矿化度，g/L',
                    nameLocation:'center',
                    nameGap:40,
                    nameTextStyle:{
                        fontWeight:'bold',
                        fontSize:1*rem,
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color:this.fontColor,
                        },
                        onZero:false,
                    },
                    splitLine: {//分割线配置
                        show:true,
                        lineStyle: {
                            color: this.chartBorderColor,
                        }
                    },
                },
                series: [
                    {
                        data:data.map(item=>{
                            return {
                                value:item.num,
                                itemStyle:{
                                    color:this.nameConfigMap[item.horizon].color,
                                },
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: this.fontColor,
                                        fontSize: 14,
                                        fontWeight: 600
                                    },
                                    formatter:(params)=>{
                                        return `${params.value}(${this.onContrast(params.value)})`;
                                    },
                                }
                            };
                        }),
                        barWidth : 30,//柱图宽度
                        type: 'bar',
                    }
                ],
            });
        },
    },
};
</script>
<style scoped lang="scss">
.water-cp-container{
    width: 100%;
    height: fit-content;
    text-align: left;
    color: var(--font-color);
    box-sizing: border-box;
    border-collapse: collapse;
    border-color: var(--border-color);
    border: 1px solid var(--border-color);
    table-layout:fixed;
    >tr{
        >td{
            &:last-child{
                width: 50%;
            }
        }
    }
    >.top-container{
        >td{
            font-size: 1.5rem;
            font-weight: bold;
            padding: 1rem;
            box-sizing: border-box;
            line-height: 1;
            box-sizing: border-box;
        }
    }
    >.content-container{
        .base-data{
            padding: 1rem;
            padding-top: 0;
            box-sizing: border-box;
            width: 100%;
            text-align: center;
            display: grid;
            grid-gap: 1rem;
            height: fit-content;
            >.base-data-title{
                font-size: 1.5rem;
            }
            >table{
                width: 100%;
                height: fit-content;
                border-collapse: collapse;
                td,th{
                    padding: 1rem 0.5rem;
                    text-align: center;
                    font-size: 1rem;
                    box-sizing: border-box;
                }
                th{
                    font-size: 1rem;
                    font-weight: bold;
                }
                .data{
                    width: 50%;
                }
            }
        }
        >.left{
            >.container{
                display: grid;
                grid-template-columns: 1fr;
                >.chart{
                    width: 100%;
                    height: 30rem;
                }
                >.base-data{
                    padding: 1rem;
                    padding-top: 0;
                    box-sizing: border-box;
                    width: 100%;
                    text-align: center;
                    display: grid;
                    grid-gap: 1rem;
                    height: fit-content;
                    >.base-data-title{
                        font-size: 1.5rem;
                    }
                    >table{
                        width: 100%;
                        height: fit-content;
                        border-collapse: collapse;
                        border-color: #0f4b78;
                        border: 1px solid #0f4b78;
                        td,th{
                            padding: 1rem 0.5rem;
                            text-align: center;
                            font-size: 1rem;
                            box-sizing: border-box;
                        }
                        th{
                            font-size: 1rem;
                            font-weight: bold;
                        }
                        .data{
                            width: 50%;
                        }
                    }
                }
            }
        }
        >.right{
            >.chart{
                width: 100%;
                height: 30rem;
            }
        }
    }
}
</style>
